<template>
  <view class="wh_750 pageHeight bg_F5F5F5 flex align-center flex-column">
    <s-header-title is-fixed
                    title="树谱样式"
                    is-display-back
                    background="#FFFFFF"
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <view v-for="(item,index) in page.setItem"
          :key="index"
    >
      <view class="hW_20"></view>
      <view class="bg_FFFFFF wh_702 flex align-center justify-between"
            style="border-radius: 8rpx;padding: 19rpx 0"
      >
        <view class="flex align-center">
          <view class="ml_22 fs_30 fw_500 color_4B4B4B wh_200">{{ item.title }}</view>
          <image v-if="!!item.is_vip" :src="`${IMG_URL}/index/vipopen.png`" class="wh_95 hW_29"></image>
        </view>
        <view class="mr_22">
          <su-switch v-if="item.type == 'switch'"
                     v-model="item.is_true"
                     size="40"
                     :bg="'bg_FF4206'"
                     @change="setAlice($event,index)"
          ></su-switch>
          <text v-else class="iconfont icon-ic_rightarrow"></text>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const page = reactive({
    options: {},
    setItem: [
      { title: '兄弟靠左排序', is_vip: false, is_true: true, type: 'switch' },
      { title: '已逝世置灰', is_true: true, type: 'switch' },
      { title: '极简模式', is_true: true, type: 'switch' },
      { title: '配偶显示', is_vip: false, is_true: true, type: 'switch' },
      { title: '真实头像', is_vip: false, is_true: true, type: 'switch' },
      //{ title: '配偶在左', is_vip: true, is_true: true, type: 'switch' },
      //{ title: '女儿显示', is_vip: true, is_true: true, type: 'switch' },

      //{ title: '姓氏显示', is_true: true, type: 'switch' },
      //{ title: '小家庭显示', is_true: true, type: 'switch' },
      //{ title: '激活标识显示', is_true: true, type: 'switch' },
      //{ title: '祠堂样式' },
    ],
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  onLoad((options) => {
    page.options = options;
    getTreeSettings();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function getTreeSettings() {
    const { data } = await sheep.$api.genealogy.getGenealogyInfo({
      genealogy_id: page.options.id,
    });
    // 兄弟靠左排序
    page.setItem[0].is_true = !!data.brother_left;
    // 已逝世置灰
    page.setItem[1].is_true = !!data.show_die_gray;
    // 极简模式
    page.setItem[2].is_true = !!data.is_simple;
    // 配偶显示
    page.setItem[3].is_true = !!data.show_spouse;
    // 真实头像
    page.setItem[4].is_true = !!data.real_head;
  }

  async function setAlice(event, index) {
    switch (index) {
      case 0:
        await setTreeSettings({
          id: page.options.id,
          brother_left: event ? 1 : 0,
        });
        break;
      case 1:
        await setTreeSettings({
          id: page.options.id,
          show_die_gray: event ? 1 : 0,
        });
        break;
      // 极简模式
      case 2:
        await setTreeSettings({
          id: page.options.id,
          is_simple: event ? 1 : 0,
        });
        break;
      // 配偶显示
      case 3:
        await setTreeSettings({
          id: page.options.id,
          show_spouse: event ? 1 : 0,
        });
        break;
      // 真实头像
      case 4:
        await setTreeSettings({
          id: page.options.id,
          real_head: event ? 1 : 0,
        });
        break;
    }
  }

  async function setTreeSettings(info) {
    const { code, msg } = await sheep.$api.genealogy.updateGenealogyInfo(info);
    if (code == 1) {
      sheep.$helper.toast('修改成功');
    } else {
      sheep.$helper.toast(msg);
    }
  }
</script>


<style scoped lang="scss">

</style>
